<template>
	<view class="gui-img-crop">
		<view class="gui-cropper-wrapper" 
		:style="{height:height + 'px', width:width+'px'}">
			<canvas canvas-id="bgCropper" id="bgCropper"
			class="gui-cropper-bg" :disable-scroll="true"
			@touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"
			:style="{width:width+'px', height:height+'px'}"></canvas>
			<canvas canvas-id="prevCropper" id="prevCropper" 
			class="gui-cropper-prev" :disable-scroll="true"></canvas>
		</view>
		<cover-view class="gui-flex gui-rows gui-nowrap btnList">
			<!-- <view class="gui-cropper-btn" @tap="selectImg">+ 选择图片</view> -->
			<cover-view class="gui-cropper-btn" @tap="saveImg">保存头像</cover-view>
			<!-- <view  ></view> -->
		</cover-view>
	</view>
</template>
<script>
import {
		mapState,
		mapMutations
	} from 'vuex';	
import WeCropper from '@/GraceUI5/js/WeCropper.js';
export default {
	data() {
		return {
			// WeCropper 对象
			WeCropper    : null,
			// 核心宽度系统会重新计算
			width        : 300,
			// 核心高度系统会重新计算
			height       : 500,
			// 剪裁设置对象
			cropperSets  : {
				height   : 500,
				width    : 300,
				id       : 'bgCropper',
				targetId : 'prevCropper',
				scale    : 2.5,  // 最大缩放倍数
				zoom     : 8,    // 缩放系数
				cut      : {
				  x      : 0,   // 裁剪框x轴起点
				  y      : 0,   // 裁剪框y轴期起点
				  width  : 200, // 裁剪框宽度
				  height : 200  // 裁剪框高度
				}
			},
			tmpFace      : null // 用于判断用户是否选择过图片
		}
	},
	computed: {
		...mapState(['userInfo'])
	},
	onLoad:function(options){
		// 获取屏幕信息规划剪裁组件宽度和高度
		const sysinfo               = uni.getSystemInfoSync();
		this.width                  = sysinfo.windowWidth;
		this.height                 = sysinfo.windowHeight - 50;
		this.cropperSets.width      = this.width;
		this.cropperSets.height     = this.height;
		this.cropperSets.pixelRatio = sysinfo.pixelRatio;
		this.cropperSets.cut.x      = (this.width  - this.cropperSets.cut.width) / 2;
		this.cropperSets.cut.y      = (this.height - this.cropperSets.cut.height) / 2;
		this.WeCropper = new WeCropper(this.cropperSets);
		this.$nextTick(function() {
			this.WeCropper.pushOrign(options.headImg);
		})
	},
	methods:{
		...mapMutations(['login']),
		selectImg : function () {
			uni.chooseImage({
				count      : 1, 
				sizeType   : ['compressed'],
				sourceType : ['album', 'camera'],
				success    : (res) => {
					this.WeCropper.pushOrign(res.tempFilePaths[0]);
				}
			});
		},
		touchStart(e) {
			this.WeCropper.touchStart(e);
		},
		touchMove(e) {
			this.WeCropper.touchMove(e);
		},
		touchEnd(e) {
			this.WeCropper.touchEnd(e);
		},
		saveImg : function() {
			this.WeCropper.getCropperImage((tempFilePath) => {
				if (tempFilePath) {
					console.log(tempFilePath);
					// 01. 此处 h5 端生成 base64 形式的图片数据, 其他端生成一个临时文件地址
					// 02. 可以连接 api 完成图片的上传工作
					// 03. 上传完成后关闭当页面，返回账户中心更新最新的头像地址即可
					// 此处演示了 图片预览
					// 上传接口
					// uni.previewImage({urls:[tempFilePath]});
					uni.uploadFile({
						url: this.$c.baseUrl + '/api/common/upload', //仅为示例，非真实的接口地址
						filePath: tempFilePath,
						name: 'file',
						success: uploadFileRes => {
							console.log(uploadFileRes.data, 'uploadFileRes.data');
							let httpImg = JSON.parse(uploadFileRes.data).data.url;
							this.$http.post('/api/worker/update', {
									avatar: httpImg
								})
								.then(res => {
									if (res.data.code == 200) {
										this.$u.msg('修改成功')
										this.userInfo.avatar = httpImg
										this.login(this.userInfo)
										this.$u.back(1, 1000)
									} else {
										this.$u.msg(res.data.msg)
									}
								});
						},
						fail: () => {
							this.$u.msg('请求超时')
						}
					});
				} else {
					console.log('获取图片地址失败，请稍后重试')
				}
			});
		},
	}
}
</script>
<style>
.gui-img-crop{width:750rpx; height:100%; position:fixed; z-index:90; left:0; top:0;}
/* #ifdef H5 */
.gui-img-crop{top:44px;}
/* #endif */
.gui-cropper-wrapper{overflow:hidden;}
.gui-cropper-bg{}
.gui-cropper-prev{}
.gui-cropper-btn{width:100%; text-align:center; line-height:50px; font-size:28rpx; color:#FFFFFF;}
.btnList{
	background: #01C394;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9999;
}
</style>